<script setup lang="ts">
  import { getBlindOrderItem } from '@/api/blindBox/blindBoxOrder';
  import { h, ref} from 'vue';
  import { NSwitch, NImage } from 'naive-ui';
  // eslint-disable-next-line vue/no-setup-props-destructure
  const { orderId } = defineProps<{
    orderId: number;
  }>();
  const columns = [
    {
      title: '商品ID',
      key: 'goodsId',
      width: 50,
    },
    {
      title: '商品图片',
      key: 'goodsImg',
      width: 50,
      render: (data) => {
        return h(NImage, {
          src: data.goodsImg,
          width: 50,
        });
      },
    },
    {
      title: '商品名称',
      key: 'goodsName',
      width: 150,
    },
    {
      title: '商品数量',
      key: 'num',
      width: 50,
    },
  ];
  const orderItem = ref();

    
  const getGoodsItem = async () => {
    console.log(orderId);
    const res = await getBlindOrderItem({id: orderId});
    console.log(res)
    orderItem.value = res;
    console.log(orderItem.value);
  };
  getGoodsItem();
</script>

<template>
  <div class="message">
    <div class="order-msg-content">
      <n-data-table :columns="columns" :data="orderItem" />
    </div>
  </div>
</template>

<style scoped></style>
